<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画</title>
		<style>
			img {
				width: 100px;
				height: 100px;
				border: 2px solid #ccc;
				border-radius: 50%;
				display: block;
				margin: 100px auto;
				/* 过渡 */
				transition: all 0.3s;
			}
			img:hover {
				/* 2D */
				/* 转换 
					位移(水平，垂直)
				*/
				/* transform: translate(200px,200px); */
				/* transform: translateY(-200px); */
				/* 旋转 */
				/* transform: rotate(-360deg); */
				/* 缩放 */
				/* transform: scale(0.5); */
				transform: rotate(360deg) scale(2);
			}
		</style>
	</head>
	<body>
		<img src="kugou/img/avatar.jpg" alt="">
	</body>
</html>